<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.1.1.min.js"> </script>
    <script src="/js/vue.min.js"></script>
</head>
<body>
<div id="myApp">
    <h1>用户登录</h1>
    <label>用户名:</label>
    <input type="text" v-model="user.userName">
    <br>
    <label>密码:</label>
    <input type="password" v-model="user.password">
    <br>
    <button type="button" @click="login">登录</button>
    <a href="/zhuce.html">用户注册</a>
</div>


</body>
<script>
    //创建vue对象
    new Vue({
        el:"#myApp",//挂载HTML元素，挂载的一个容器
        data:{ //数据
            user:{
                userName:"",//用户名
                password:""//密码
            }
        },
        methods:{//函数，方法，多个函数
            login(){//登录
                //打印数据到浏览器的控制台
                console.log(this.user);
                //把数据发送到服务端
                $.ajax({
                    url:"/user/login",//服务器地址，控制器的地址函数
                    data:this.user,//数据，发送的数据
                    success:function (rs) {//成功访问到服务端后执行的函数，rs 响应数据，服务端返回的数据
                        console.log(rs);
                        if (rs.code==200){
                            alert(rs.msg);
                            //跳转到登录页面
                            //window.location.href="/login.html";
                        }else{
                            alert(rs.msg);
                        }
                    }
                })

            }
        }
    })
</script>
</html>
